<template>
  <div class="event-add">
    <a-form
      ref="form"
      :rules="rules"
      :model="formData"
      :label-col="{ xxl: 6, xl: 6, lg: 6, md: 3, sm: 3, xs: 3 }"
      :wrapper-col="{ xxl: 18, xl: 18, lg: 18, md: 21, sm: 21, xs: 21 }"
    >
      <a-form-item
        label="事件描述"
        name="event_describe"
        :label-col="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 3, xs: 3 }"
        :wrapper-col="{ xxl: 21, xl: 21, lg: 21, md: 21, sm: 21, xs: 21 }"
      >
        <a-textarea v-model:value="formData.event_describe" :placeholder="rules.event_describe.message" />
      </a-form-item>
      <a-row>
        <a-col v-bind="formSpan">
          <a-form-item label="事发时间" name="occur_time">
            <a-date-picker
              style="width: 100%"
              v-model:value="formData.occur_time"
              :showTime="true"
              valueFormat="YYYY-MM-DD HH:mm:ss"
            />
          </a-form-item>
        </a-col>
        <a-col v-bind="formSpan">
          <a-form-item label="事件级别" name="event_level">
            <a-select v-model:value="formData.event_level" :options="eventLevelList" placeholder="请选择事件级别" />
          </a-form-item>
        </a-col>
        <a-col v-bind="formSpan">
          <a-form-item label="事件类别">
            <a-select
              v-model:value="formData.p_type_id"
              :options="pTypeList"
              placeholder="请选择事件类别"
              @change="getCTypeList"
            />
          </a-form-item>
        </a-col>
        <a-col v-bind="formSpan">
          <a-form-item label="事件类型">
            <a-select
              v-model:value="formData.c_type_id"
              :options="cTypeList"
              @change="cTypeChange"
              placeholder="请选择事件类型"
            />
          </a-form-item>
        </a-col>
        <a-col v-bind="formSpan">
          <a-form-item label="地点" name="location">
            <a-input v-model:value="formData.location" :readOnly="true" :placeholder="rules.location.message" />
          </a-form-item>
        </a-col>
        <a-col v-bind="formSpan">
          <a-form-item label="坐标" name="longitude,latitude">
            <a-input
              v-model:value="formData['longitude,latitude']"
              :readOnly="true"
              :placeholder="rules['longitude,latitude'].message"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <upload
      :params-data="{ filePath: 'event' }"
      :show-upload-count="6"
      @uploadFile="uploadFile"
      style="margin-left: 15px"
    />
    <!--    <div class="flex flex-center btn-container">
      <a-button @click="cancel">取消</a-button>
      <a-button @click="onOk">确认</a-button>
    </div>-->
  </div>
</template>

<script>
import { eventAdd, getUnitEventType } from '@gis/lib/api';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import Upload from '@gis/lib/components/Uploader/index.vue';
// import { getTypeBySuffix } from '@/components/Upload/utils';

export default {
  name: 'event-add',
  props: {
    videoDetails: { type: Object, default: () => ({}) },
  },
  components: { Upload },
  data() {
    return {
      pTypeList: [],
      formSpan: { xxl: 12, xl: 12, lg: 12, md: 24, sm: 24, xs: 24 },
      formData: {},
      rules: {
        event_describe: { required: true, message: '请填写事件描述' },
        occur_time: { required: true, message: '请选择事发时间' },
        location: { required: true, message: '请点击地图自动获取' },
        event_level: { required: true, message: '请选择时间级别' },
        'longitude,latitude': { required: true, message: '请点击地图自动获取' },
      },
      eventLevelList: [
        { label: '特急', value: '1' },
        { label: '紧急', value: '2' },
        { label: '一般', value: '3' },
      ],
      attachment_list: [], //上传的文件列表
      mapOptions: {},
      cTypeList: [], //小类列表
      markerOptions: {},
      poiPickFields: {
        position: 'longitude,latitude',
      },
    };
  },
  computed: {
    unit_code() {
      const userInfoStore = useUserInfoStore();
      return userInfoStore.unit_code;
    },
  },
  created() {
    this.getUnitEventType();
  },
  mounted() {
    this.$watch(
      () => this.videoDetails,
      () => {
        // console.log(this.videoDetails, this.unit_code);
        const { position } = this.poiPickFields;
        const { address, longitude, latitude } = this.videoDetails;
        this.formData = {
          location: address,
          [position]: longitude + ',' + latitude,
        };
      },
      { immediate: true }
    );
  },
  methods: {
    async onOk() {
      const formatValues = await this.$refs.form.validate();
      if (!formatValues) return false;
      //source:3平台上报
      const { longitude, latitude } = this.videoDetails;
      const params = Object.assign({}, this.formData, {
        attachment_list: this.attachment_list,
        source: 3,
        unit_code: this.unit_code,
        longitude: longitude,
        latitude: latitude,
      });
      delete params['longitude,latitude'];
      this.handleFormResult(await eventAdd(params), {
        onOk: () => this.cancel(),
      });
    },
    cancel() {
      this.$emit('closeDialog');
    },
    cTypeChange(val) {
      // console.log(val, '值111');
      // vue.set(this.formData, 'c_type_id', val);
    },
    async getUnitEventType() {
      const data = this.handleCommonResult(await getUnitEventType({ unit_code: this.unit_code }));
      this.pTypeList = data.map((item) =>
        Object.assign({}, item, { label: item.type_name, value: item.event_type_id })
      );
    },
    uploadFile(fileList) {
      this.attachment_list = fileList.map((item) => ({
        attachment_name: item.name,
        attachment_url: item.url,
        // attachment_type: getTypeBySuffix(item.suffix),
      }));
    },
    async getCTypeList() {
      // this.formData.c_type_id = undefined;
      // vue.set(this.formData, 'c_type_id', undefined);
      const params = { unit_code: this.unit_code, upper_type_id: this.formData.p_type_id };
      const data = this.handleCommonResult(await getUnitEventType(params));
      this.cTypeList = data.map((item) =>
        Object.assign({}, item, { label: item.type_name, value: item.event_type_id })
      );
    },
  },
};
</script>

<style scoped lang="less">
.event-add {
  padding: 20px;
}
</style>
